<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8" />
	<title>导航管理</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
	<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
	<link rel="stylesheet" href="/app/laoha/sdk/sdk.css" />
	<link rel="stylesheet" href="/app/laoha/sdk/helper.css" />
	<link rel="stylesheet" href="/app/laoha/sdk/iconfont.css" />
	<style>
		html,
		body,
		.app-wrapper {
			position: relative;
			width: 100%;
			height: 100%;
			margin: 0;
			padding: 0;
		}

		img {
			max-width: 100%;
		}
	</style>
</head>

<body>
	<div id="root" class="app-wrapper"></div>
	<script src="/app/laoha/sdk/sdk.js"></script>
	<script type="text/javascript">
		// API相关常量
		const LIST_API = "/app/laoha/admin/nav/list";
		const SHOW_API = "/app/laoha/admin/nav/show";
		const CREATE_API = "post:/app/laoha/admin/nav/store";
		const DELETE_API = "delete:/app/laoha/admin/nav/delete";
		const UPDATE_API = "put:/app/laoha/admin/nav/update";
		const SELECT_API = "/app/laoha/admin/nav/select";
		const UPLOAD_IMAGE = "/app/admin/upload/image";
		(function () {
			let amis = amisRequire('amis/embed');
			// 通过替换下面这个配置来生成不同页面
			let amisJSON = {
				"type": "page",
				"title": "${root_name}导航管理",
				"data":<?= json_encode($params, JSON_UNESCAPED_UNICODE) ?>,
				"aside": [
					{
						"type": "tpl",
						"tpl": "<h4 class='ml-5'> 选择类别</h4>"
					},
					{
						"type": "nav",
						"name": "nav",
						"stacked": true,
						"source": "${navs}",
					}
				],
				"body": [
					{
						"type": "crud",
						"api": LIST_API,
						"expandConfig": {
							"expand": "all"
						},
						"quickSaveApi": "/app/laoha/admin/nav/order",
						"headerToolbar": [
							"reload",
							{
								"label": "新增",
								"visibleOn": "${rules.admin || rules.store}",
								"type": "button",
								"actionType": "dialog",
								"level": "primary",
								"className": "m-b-sm",
								"align": "right",
								"dialog": {
									"title": "新增表单",
									"size": "lg",
									"body": {
										"type": "form",
										"api": CREATE_API,
										"body": [
											{
												"type": "hidden",
												"name": "root",
												"value": "${root}",
											},
											{
												"type": "tree-select",
												"name": "parent_id",
												"label": "选择上级",
												"labelField": "title",
												"valueField": "id",
												"source": SELECT_API + "?status=0&root=${root}",
											},
											{
												"type": "input-text",
												"name": "title",
												"label": "名称",
												"required": true
											},
											{
												"type": "radios",
												"name": "type",
												"label": "类型",
												"selectFirst": true,
												"options": [
													{
														"label": "不限",
														"value": "0"
													},
													{
														"label": "会员",
														"value": "1"
													},
												]
											},
											{
												"type": "input-text",
												"name": "url",
												"label": "链接",
											},
											{
												"type": "group",
												"body": [
													{
														"type": "input-text",
														"name": "icon",
														"label": "icon",
														"desc": "支持<a href='http://fontawesome.p2hp.com/faicons.html' target='_blank'>fontawesome</a> v4 例 fa-bath"
													},
													{
														"type": "icon",
														"icon": "fa ${icon}",
														"className": "text-xl",
														"vendor": ""
													}
												]
											},
											{
												"type": "switch",
												"name": "target",
												"label": "是否新开窗口",
												"value": 0,
												"trueValue": 1,
												"falseValue": 0
											},
											{
												"type": "input-number",
												"name": "sort",
												"label": "排序",
												"min": 0,
												"value": 0
											},
											{
												"type": "switch",
												"name": "status",
												"label": "是否启用",
												"value": 0,
												"trueValue": 0,
												"falseValue": 1
											}
										]
									}
								}
							},
						],
						"columns": [
							{
								"name": "id",
								"label": "ID",
								"type": "text",
								"toggled": false
							},
							{
								"name": "title",
								"label": "名称",
								"type": "tpl",
								"tpl": "${IF(icon,'<i class=\"fa '+icon+'\"></i>','')} ${title}"
							},
							{
								"type": "mapping",
								"name": "type",
								"label": "类型",
								"map": {
									"0": "不限",
									"1": "会员",
								}
							},
							{
								"name": "url",
								"label": "链接",
								"width": 200,
							},
							{
								"name": "sort",
								"label": "排序",
								"quickEdit": {
									"mode": "inline",
									"type": "input-number",
									"size": "xs",
									"min": 0,
								},
								"saveImmediately": true
							},
							{
								"name": "status",
								"label": "启用",
								"filterable": {
									"options": [
										{ "label": "否", "value": "1" },
										{ "label": "是", "value": "0" },
									]
								},
								"quickEdit": {
									"mode": "inline",
									"type": "switch",
									"trueValue": 0,
									"falseValue": 1,
									"size": "sm",
									"saveImmediately": true,
								}
							},
							{
								"type": "operation",
								"label": "操作",
								"width": 100,
								"fixed": "right",
								"buttons": [
									{
										"type": "button",
										"icon": "fa fa-eye",
										"tooltip": "查看",
										"actionType": "dialog",
										"dialog": {
											"title": "查看",
											"size": "full",
											"body": {
												"type": "form",
												"initApi": SHOW_API + "?id=${id}",
												"body": [
													{
														"type": "static",
														"name": "title",
														"label": "名称"
													},
													{
														"type": "static",
														"name": "url",
														"label": "链接"
													},
													{
														"type": "static",
														"name": "sort",
														"label": "排序",
													},
													{
														"type": "switch",
														"name": "status",
														"label": "是否启用",
														"trueValue": 0,
														"falseValue": 1
													}
												]
											}
										}
									},
									{
										"type": "button",
										"visibleOn": "${rules.admin || rules.update}",
										"icon": "fa fa-pencil",
										"tooltip": "编辑",
										"actionType": "dialog",
										"dialog": {
											"position": "left",
											"size": "lg",
											"title": "编辑",
											"body": {
												"type": "form",
												"name": "sample-edit-form",
												"initApi": SHOW_API + "?edit=1&id=${id}",
												"api": UPDATE_API + "?id=${id}",
												"body": [
													{
														"type": "tree-select",
														"name": "parent_id",
														"label": "选择上级",
														"labelField": "title",
														"valueField": "id",
														"source": SELECT_API + "?id=neq,${id}&status=0&root=${root}&parent_id=0",
														"visibleOn": "${!children}"
													},
													{
														"type": "input-text",
														"name": "title",
														"label": "名称",
														"required": true
													},
													{
														"type": "radios",
														"name": "type",
														"label": "类型",
														"options": [
															{
																"label": "不限",
																"value": "0"
															},
															{
																"label": "会员",
																"value": "1"
															},
														]
													},
													{
														"type": "input-text",
														"name": "url",
														"label": "链接",
													},
													{
														"type": "group",
														"body": [
															{
																"type": "input-text",
																"name": "icon",
																"label": "icon",
																"desc": "支持<a href='http://fontawesome.p2hp.com/faicons.html' target='_blank'>fontawesome</a> v4 例 fa-bath"
															},
															{
																"type": "icon",
																"icon": "fa ${icon}",
																"className": "text-xl",
																"vendor": ""
															}
														]
													},
													{
														"type": "switch",
														"name": "target",
														"label": "是否新开窗口",
														"value": 0,
														"trueValue": 1,
														"falseValue": 0
													},
													{
														"type": "input-number",
														"name": "sort",
														"label": "排序",
														"min": 0,
														"value": 0
													},
													{
														"type": "switch",
														"name": "status",
														"label": "是否启用",
														"trueValue": 0,
														"falseValue": 1
													}
												]
											}
										}
									},
									{
										"type": "button",
										"icon": "fa fa-times text-danger",
										"tooltip": "删除",
										"actionType": "ajax",
										"confirmText": "您确认要删除?",
										"api": DELETE_API + "?id=${id}",
										"visibleOn": "${rules.admin || rules.delete}",
									}
								],
								"toggled": true
							}
						]
					}
				]
			};
			let amisScoped = amis.embed('#root', amisJSON, {}, { toastPosition: 'center' });
		})();
	</script>
</body>

</html>